<template>
	<view class="trouble-container">
		<view class="fix">
			<view class="nav-header">
				<view class="nav-left-btn" @click="back">
					< </view>
						<view class="nav-header-title">
							<text class="title">
								隐患排查治理
							</text>
						</view>
						<view class="nav-right-btn">

						</view>
				</view>

				<!-- 	<view class="sec">
					<view v-for="(item, index) in tabsList" :key="index" @click="sectionChange(index)" class="list">
						<view class="primary" :class="tabsActive == index ? 'active' : ''">
							<text class="label">{{item}}</text>
						</view>
					</view>
					<tabs :list="tabsList"  />
				</view> -->
				<uni-segmented-control :current="tabsActive" :values="tabsList" @clickItem="onClickItem"
					style-type="text" active-color="#007aff" />
			</view>
			<components :is="isComponent" :commpanyaccount="commpanyaccount"></components>
		</view>
</template>

<script>
	import Regular from "./components/regular.vue"
	import Manage from "./components/manage.vue"
	import AllShoot from "./components/allShoot.vue"
	import tabs from "@/components/tabs/index";
	import {
		mapGetters
	} from "vuex"
	import {
		troubleMenu
	} from "@/utils/menuAuth.js"
	export default {
		components: {
			Regular,
			Manage,
			AllShoot,
			tabs
		},
		onLoad(option) {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('acceptDataFromOpenerPage', function(data) {
				// console.log("页面返回", data)
			})

		},
		data() {
			return {
				isComponent: Regular,
				tabsList: ['定期排查', '隐患整改', '全员排查'],
				tabsActive: null
			}
		},
		methods: {
			sectionChange(index) {},
			onClickItem(e) {
				console.log("e", e.currentIndex)
				this.tabsActive = e.currentIndex
				if (this.tabsActivel == 0) {
					this.isComponent = Regular

				} else if (this.tabsActive == 1) {
					this.isComponent = Manage

				} else if (this.tabsActive == 2) {
					this.isComponent = AllShoot

				}
			},
			//判断有没有权限
			judgeMenuAuth() {
				let menuObj = troubleMenu()
				let {
					tabsActive,
					tabsList
				} = menuObj
				this.tabsActive = tabsActive
				this.tabsList = tabsList
				console.log("隐患测试对象", menuObj)
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},


		},

		computed: {
			...mapGetters(["commpanyaccount"])
		},

		mounted() {
			this.judgeMenuAuth()
		},
		watch: {
			tabsActive(val) {
				console.log("捡来了", val)
				if (val == 0) {
					this.isComponent = Regular

				} else if (val == 1) {
					this.isComponent = Manage

				} else if (val == 2) {
					this.isComponent = AllShoot

				}
			}
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh')
			setTimeout(function() {
				uni.stopPullDownRefresh()
				console.log('stopPullDownRefresh')
			}, 1000)
		}

	};
</script>

<style lang="scss" scoped>
	.trouble-container {
		width: 100vw;
		height: 100vh;
		position: relative;
		background: linear-gradient(180deg, #bbd9fe 0%, rgba(202, 231, 255, 0) 100%);

		.fix {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 999;
			// padding-bottom: 20rpx;
			background: #bbd9fe;

			/* 确保导航栏在顶部 */
			.nav-header {
				color: rgb(51, 51, 51);
				background-color: transparent;
				height: 130rpx;
				display: flex;
				padding: 0 10px;
				flex-direction: row;

				.nav-left-btn {
					display: flex;
					width: 60px;
					justify-content: flex-start;
					align-items: center;
					color: #666666;
				}

				.nav-header-title {
					display: flex;
					flex: 1;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					padding: 0 10px;
					overflow: hidden;

					.title {
						font-weight: 600;
						font-size: 32rpx;
						color: #17233D;
					}
				}

				.nav-right-btn {
					display: flex;
					width: 60px;
					justify-content: flex-end;
					align-items: center;
				}
			}

			// tabs样式
			::v-deep {
				.scroll uni-view {
					margin-bottom: 20rpx;
					background-color: #bbd9fe;
					width: 50%;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #17233d;
					line-height: 36rpx;
					text-align: center;
					font-style: normal;
				}

				.scroll .active-item {
					border-bottom: 8rpx solid #137ee9;
					border-radius: 8rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #137ee9;
					text-align: center;
					font-style: normal;
				}
			}

			.sec {
				display: flex;
				justify-content: space-between;
				width: 100%;
				margin: 0 auto;

				.list {
					display: flex;
					flex: 1;
					justify-content: center;
					overflow: hidden;

					.active {
						.label {
							height: 44rpx;
							line-height: 44rpx;
							font-weight: 600;
							font-size: 32rpx;
							color: #137EE9;
							border-bottom: 2px solid #137ee9;
						}
					}
				}
			}

			/*  */

		}


	}
</style>